<template>
  <div class="email_popup">
    <!-- 选邮箱弹框 -->
    <van-popup
      v-model="showEmail"
      position="bottom"
      round
      closeable
      :close-on-click-overlay="false"
    >
      <div class="email_container">
        <header class="header">
          <p class="title">收件人邮箱</p>
          <!-- <van-button size="mini" round plain class="email_setting"
          @click="$router.push('/pageList/mailboxSettings')"
            >邮箱设置</van-button
          > -->
        </header>

        <div class="enter_email">
          <van-field v-model="email" placeholder="选择或输入邮箱">
            <!-- <template #button>
              <van-icon @click="showAction = true" name="arrow-down" />
            </template> -->
          </van-field>
        </div>

        <van-button class="submit_btn" round @click="submit">确定</van-button>
      </div>
    </van-popup>

    <van-action-sheet v-model="showAction" :actions="emailList" @select="onSelect" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      showEmail:false,
      showAction:false,
      emailList:[],
    };
  },
  created(){
  },
  methods: {
    init(){
      this.showEmail = true;
      this.getEmailList();
    },
    // 提交事件
    submit(){
      this.$emit('submit',this.email)
    },
    // 选择邮箱
    onSelect(item){
      this.email = item.mail;
      this.showAction = false;
    },
    // 获取邮箱列表
    getEmailList() {
      this.$toast.loading({ message: "加载中..." });
      this.$http({
        url: "/private-xm/User/getEmailList",
        method: "post",
      })
        .then((res) => {
          this.$toast.clear();
          let cur = null;
          res.data.forEach(item => {
            item.name = item.mail
            if(item.isDefault === 1){
              cur = item;
            }
          })
          this.email = cur ? cur.mail : '';
          this.emailList = res.data;
        })
        .catch((error) => {
          this.$toast.clear();
          console.log(error, "error");
          this.$toast.fail(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
.email_popup {
  .email_container {
    padding: 1.066667rem /* 40/37.5 */ .266667rem /* 10/37.5 */;
    .submit_btn {
      width: 100%;
      background: $primary;
      color: #fff;
      margin-top: .666667rem /* 25/37.5 */;
    }
    .enter_email {
      border-bottom: 1px solid #dedede;
      margin-top: .266667rem /* 10/37.5 */x;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: .613333rem +$fontsize/* 23/37.5 */;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #111111;
      }
      .email_setting {
        border: 1px solid $primary;
        color: $primary;
      }
    }
  }
}
</style>
